<template>
  <div>
    <div>
      <el-radio-group v-model="data.type" @change="actionTypeChange">
        <el-radio v-if="actions.indexOf('device') >= 0" :label="'device'"
        >设备控制
        </el-radio
        >
        <el-radio v-if="actions.indexOf('alarm') >= 0" :label="'alarm'"
        >告警消息
        </el-radio
        >
        <el-radio v-if="actions.indexOf('scene') >= 0" :label="'scene'"
        >场景控制
        </el-radio
        >
        <el-radio v-if="actions.indexOf('http') >= 0" :label="'http'"
        >http推送
        </el-radio
        >
        <el-radio v-if="actions.indexOf('mqtt') >= 0" :label="'mqtt'"
        >mqtt推送
        </el-radio
        >
        <el-radio v-if="actions.indexOf('kafka') >= 0" :label="'kafka'"
        >kafka推送
        </el-radio
        >
        <el-radio v-if="actions.indexOf('tcp') >= 0" :label="'tcp'"
        >tcp推送
        </el-radio
        >
      </el-radio-group>
    </div>
    <DeviceAction :config="data" v-if="data.type === 'device'"></DeviceAction>
    <HttpAction :config="data" v-if="data.type === 'http'"></HttpAction>
    <MqttAction :config="data" v-if="data.type === 'mqtt'"></MqttAction>
    <KafkaAction :config="data" v-if="data.type === 'kafka'"></KafkaAction>
    <TcpAction :config="data" v-if="data.type === 'tcp'"></TcpAction>
  </div>
</template>

<script>
import DeviceAction from './DeviceAction.vue'
import HttpAction from './HttpAction.vue'
import MqttAction from '@/views/rule/MqttAction'
import KafkaAction from '@/views/rule/KafkaAction'
import TcpAction from '@/views/rule/TcpAction'

export default {
  name: 'Action',
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          type: '',
          services: [{}]
        }
      }
    },
    actions: {
      type: String,
      default: () => {
        return 'device'
      }
    }
  },
  data () {
    return {}
  },
  components: {
    KafkaAction,
    MqttAction,
    DeviceAction,
    HttpAction,
    TcpAction
  },
  created () {
  },
  methods: {
    actionTypeChange () {
      if (this.data.services.length === 0) {
        if (this.data.type === 'http') {
          this.data.services = [
            {
              url: '',
              script: `this.translate=function(msg){
              }`
            }
          ]
        } else if (this.data.type === 'mqtt') {
          this.data.services = [
            {
              host: '',
              port: 1883,
              username: '',
              password: '',
              script: `this.translate=function(msg){
              }`
            }
          ]
        } else if (this.data.type === 'kafka') {
          this.data.services = [
            {
              services: '',
              ack: '',
              script: `this.translate=function(msg){
              }`
            }
          ]
        } else if (this.data.type === 'tcp') {
          this.data.services = [
            {
              host: '',
              port: 1883,
              script: `this.translate=function(msg){
              }`
            }
          ]
        }
      }
    }
  }
}
</script>

<style>
</style>
